<template>
  <div class="carousel">
    <!-- {{ duration }} -->
    <div :class="['carousel-container', duration == 1 ? 'container-top-o' : 'container-top-i']">
      <div class="carousel-item" :style="{
        backgroundImage: 'url(' + imageUrls + ')',
      }"></div>
      <div class="carousel-item" :style="{
        backgroundImage: 'url(' + imageUrls + ')',
      }"></div>
    </div>

  </div>
</template>

<script>
import { defineComponent, onMounted, onUnmounted } from "vue";

export default defineComponent({
  name: "VerticalCarousel",
  props: {
    imageUrls: {
      required: true,
    },
    duration: {
      default: 0, // 自动切换的时间间隔，单位为毫秒
    },
  },
  setup() {


    onMounted(() => {
    });

    onUnmounted(() => {
    });

    return {
    };
  },
});
</script>

<!-- <style scoped>
.carousel {
  position: relative;
  width: 110px;
  height: 110px;
  overflow: hidden;
}

.carousel-container {
  position: absolute;
  /* top: -80%; */
  width: 100%;
  height: 220px;

}

.container-top-o {
  top: 0;
  transition: all 1.5s ease-in-out;
}

.container-top-i {
  top: -100%;
}


.carousel-item {
  /* position: absolute; */

  width: 100%;
  background-size: cover;
  background-position: center;
  width: 110px;
  height: 110px;
}
</style> -->

<style scoped>
.carousel {
  position: relative;
  width: calc(110px / 2.2);
  height: calc(110px / 2.2);
  overflow: hidden;
}

.carousel-container {
  position: absolute;
  /* top: -80%; */
  width: 100%;
  height: calc(220px / 2.2);

}

.container-top-o {
  top: 0;
  transition: all 1.5s ease-in-out;
}

.container-top-i {
  top: -100%;
}


.carousel-item {
  /* position: absolute; */

  width: 100%;
  background-size: cover;
  background-position: center;
  width: calc(110px / 2.2);
  height: calc(110px / 2.2);
}
</style>